<!DOCTYPE html>
<html>
<head>
    <title>Typo</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/buttonStyle.css" rel='stylesheet' type='text/css' />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- start menu -->
    <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/memenu.js"></script>
    <script>$(document).ready(function(){$(".memenu").memenu();});</script>
    <script src="js/simpleCart.min.js"> </script>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="layer/layer.js"></script>
    <!-- slide -->
</head>
<body>
<!--header-->
<div class="header">
    <div class="header-top">
        <div class="container">
            <div class="col-sm-4 logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="col-sm-4 header-left" style="width: 400px">
                <div id="userInfo">
                </div>
                <div class="cart box_1">
                    <a href="checkout.html">
                        <h3> <div class="total">
                            <img src="images/cart.png" alt=""/>
                        </div></h3>
                    </a>
                    <p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="col-sm-2 number">
                <span><i class="glyphicon glyphicon-phone"></i>085 596 234</span>
            </div>
            <div class="col-sm-8 h_menu4">
                <ul class="memenu skyblue">
                    <li class=" grid"><a  href="index.html">主页</a></li>
                    <li><a  href="products.html">男子</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有服饰</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">上衣</a></li>
                                            <li><a style="color: black" href="products.html">短袖体恤</a></li>
                                            <li><a style="color: black" href="products.html">运动卫衣</a></li>
                                            <li><a style="color: black" href="products.html">夹克/外套</a></li>
                                            <li><a style="color: black" href="products.html">棉服/羽绒服</a></li>
                                            <li><a style="color: black" href="products.html">运动下装</a></li>
                                            <li><a style="color: black" href="products.html">泳裤</a></li>
                                            <li><a style="color: black" href="products.html">比赛服 & Chinos</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有鞋类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">跑步</a></li>
                                            <li><a style="color: black" href="products.html">篮球</a></li>
                                            <li><a style="color: black" href="products.html">户外</a></li>
                                            <li><a style="color: black" href="products.html">足球</a></li>
                                            <li><a style="color: black" href="products.html">网球</a></li>
                                            <li><a style="color: black" href="products.html">拖鞋</a></li>
                                            <li><a style="color: black" href="products.html">休闲</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">配附件类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">包</a></li>
                                            <li><a style="color: black" href="products.html">袜子</a></li>
                                            <li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
                                            <li><a style="color: black" href="products.html">足球/篮球</a></li>
                                            <li><a style="color: black" href="products.html">运动装备</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a  href="products.html">女子</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有服饰</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">上衣</a></li>
                                            <li><a style="color: black" href="products.html">短袖体恤</a></li>
                                            <li><a style="color: black" href="products.html">运动卫衣</a></li>
                                            <li><a style="color: black" href="products.html">夹克/外套</a></li>
                                            <li><a style="color: black" href="products.html">短裙/连衣裙</a></li>
                                            <li><a style="color: black" href="products.html">运动下装</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有鞋类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">跑步</a></li>
                                            <li><a style="color: black" href="products.html">户外</a></li>
                                            <li><a style="color: black" href="products.html">足球</a></li>
                                            <li><a style="color: black" href="products.html">网球</a></li>
                                            <li><a style="color: black" href="products.html">拖鞋</a></li>
                                            <li><a style="color: black" href="products.html">休闲</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">配附件类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">包</a></li>
                                            <li><a style="color: black" href="products.html">袜子</a></li>
                                            <li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
                                            <li><a style="color: black" href="products.html">球类</a></li>
                                            <li><a style="color: black" href="products.html">运动装备</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a  href="typo.html">品牌</a></li>
                    <li><a class="color6" href="">联系我们</a></li>
                </ul>
            </div>
            <div class="col-sm-2 search">
                <a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
            </div>
            <div class="clearfix"> </div>
            <!---pop-up-box---->
            <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
            <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
            <!---//pop-up-box---->
            <div id="small-dialog" class="mfp-hide">
                <div class="search-top">
                    <div class="login">
                        <input type="submit" value="">
                        <input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">
                    </div>
                    <p>	Shopping</p>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
            </script>
            <!---->
        </div>
    </div>
</div>
<!--//header-->
<!--content-->
<div class="container">
    <div id="addressInfo" style="margin-top: 50px;border:1px solid #D0D0D0;color: #8D8D8D">
        <div style="color: #8D8D8D;margin: 20px 0px 0px 20px"><b>订单信息</b></div>
        <hr style='border:none;border-top:1px solid #D0D0D0;'>
    </div>
    <div id="productInfo" style="margin: 50px 0px 200px 0px;border:1px solid #D0D0D0;">
        <div style="color: #8D8D8D;margin: 20px 0px 0px 20px"><b>商品信息</b></div>
        <hr style='border:none;border-top:1px solid #D0D0D0;'>

    </div>
</div>

<!--//content-->

<!--footer-->
<div class="footer">
    <div class="container">
        <div class="footer-top">
            <div class="col-md-4 top-footer1">
                <h2>Newsletter</h2>
                <form>
                    <input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
                    <input type="submit" value="SUBSCRIBE">
                </form>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="col-md-3 footer-bottom-cate">
                <h6>Categories</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li><a href="#">Dignissim neque</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>

                </ul>
            </div>
            <div class="col-md-3 footer-bottom-cate">
                <h6>Feature Projects</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li><a href="#">Dignissim neque</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>

                </ul>
            </div>
            <div class="col-md-3 footer-bottom-cate">
                <h6>Top Brands</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li><a href="#">Dignissim neque</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Ultrices id du</a></li>
                    <li><a href="#">Commodo sit</a></li>

                </ul>
            </div>
            <div class="col-md-3 footer-bottom-cate cate-bottom">
                <h6>Our Address</h6>
                <ul>
                    <li>Aliquam metus  dui. </li>
                    <li>orci, ornareidquet</li>
                    <li> ut,DUI.</li>
                    <li>nisi, dignissim</li>
                    <li>gravida at.</li>
                    <li class="phone">PH : 6985792466</li>
                </ul>
            </div>
            <div class="clearfix"> </div>
            <p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
        </div>
    </div>
</div>

<!--//footer-->
</body>
</html>
<script>

    var userid;
    //调用检测自己的登录状态
    proveMe();

    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //已登录
                if(data.code==200){
                    var user = data.data.user;
                    userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;

                    //调用显示用户信息函数
                    showUser(username);
                    //显示订单的详细信息
                    getOrderInfo();

                }else{
                    //调用显示缺省值的函数
                    showDefault();
                }
            }
        });
    }

    //注销
    function removeMe() {
        $.ajax({
            type:'post',
            url:'/user/removeMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status==200){
                    proveMe();
                }
            }
        });
    }

    //显示用户在线信息函数
    function showUser(username) {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log' style='width:250px;font-weight:400;font-size:20px;float: left;margin-top: 14px'>欢迎您，<a href='userInfo.html' style='color:black;display: inline;margin: 0;'>"+ username +"</a><a style='display: inline;color: #B2B2B2' onclick='removeMe()' href='#'>注销</a></p>");
    }

    //显示用户在线缺省值的函数
    function showDefault() {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log'><a href='account.html'  >登陆</a>"+
            "<span>or</span><a  href='register.html'  >注册</a></p>");
    }

    //得到订单的信息
    function getOrderInfo() {
        //分割请求url得到订单信息
        var url = window.location.search; /* 获取属性（“?”后面的分段） */
        var data = url.split("?")[1]; //得到订单id
        var orderid = data.split("=")[1];

        $.ajax({
            type: 'get',
            url: '/orders/selectById',
            data: data,
            cache: false,
            dataType: 'json',
            success: function (data) {

                //得到订单信息
                var addressid = data.addressid;
                var productid = data.productid;
                var productnum = data.productnum;
                var productsize = data.productsize;
                var orderdate = data.orderdate;
                var orderstatus = data.orderstatus;

                //得到产品的信息
                showProductInfo(orderid, productid, productnum, productsize, orderdate, orderstatus);
                //得到地址信息
                showAddressInfo(addressid)
            }
        })
    }

    //展示商品信息
    function showProductInfo(orderid, productid, productnum, productsize, orderdate, orderstatus) {

        $.ajax({
            async: false,
            type:'get',
            url:'/product/selectById',
            data:'productId='+productid,
            cache:false,
            dataType:'json',
            success:function(data) {

                var productname = data.productname;
                var productprice = data.productprice;
                var imageurl = data.imageurl;
                var date = formatDate(orderdate);


                var totalPrice = productnum * productprice;
                $("#productInfo").append("<tr id='productAction'>"+
                    "<td class='ring-in'><a href='single.html' class='at-in'>"+
                    "<img src='../"+imageurl+"' class='img-responsive' alt=''></a>"+
                    "<div class='sed'>"+
                    "<h5>"+productname+"</h5>"+
                    "<p>商品信息：尺码："+productsize+"</p>"+
                    "</div>"+
                    "<div class='clearfix'></div>"+
                    "</td>"+
                    "<td>数量："+productnum+"</td>"+
                    "<td>单价：￥"+productprice+"</td>"+
                    "<td>总价：￥"+totalPrice	+"</td>"+
                    "<td>订单日期："+date+"</td>"+
                    "<td>"+orderstatus+"</td>"+
                    "</tr>");

                if(orderstatus == "待支付"){
                    $("#productInfo").append("<div style='float: right;margin: 50px 50px 0px 0px'><a  href='javascript:void(0)' style='padding:20px 80px 20px 80px' onclick='pay4Product("+orderid+")' class='hvr-bounce-to-top button'>支付</a></div>");
                }
            },
            error: function (data) {
                alert("出错了");
            }
        });

    }

    //获取地址数据
    function showAddressInfo(addressid) {


        $.ajax({
            type:'get',
            url:'/address/selectById',
            data:'addressid='+addressid,
            cache:false,
            dataType:'json',
            success:function(data) {

                var receiver = data.receiver;
                var phonenum = data.phonenum;
                var addressvalue = data.addressvalue;

                $("#addressInfo").append("<li style='list-style-type:none'>"+
                    "<ol>收件人："+receiver+"</ol>"+
                    "<ol>联系方式："+phonenum+"</ol>"+
                    "<ol>详细地址："+addressvalue+"</ol>"+
                    "</li>");

            }
        });
    }

    //格式化时间的显示
    function formatDate(orderdate) {
        var date = orderdate.split("T");
        var date1 = date[0];
        var date2 = date[1].split(".");
        return date1+" " + date2[0];
    }

    //为订单支付
    function pay4Product(orderid) {

        layer.confirm('为订单付款？', {
            btn: ['支付','取消'] //按钮
        }, function() {
            //为商品支付
            $.ajax({
                async: false,
                type: 'post',
                url: '/orders/pay4Order',
                data: 'orderid='+orderid+'&userid='+userid,
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if(data.status == 200){
                        layer.msg('支付成功');
                    }else if(data.status == 401){
                        layer.msg('请先登录！');
                    }else {
                        layer.msg('支付超时！请重试');
                    }
                    location.reload();
                }
            })
        }, function(){
            layer.msg("支付取消");
        });

    }

</script>